<template>
  <div>
    <div class="parent">
      <div id="g1">
        <el-table
          ref="multipleTable"
          style="width: 100%"
          :show-header="false"
          :data="tableData"
          row-key="ID"
          :cell-style="{ paddingTop: '4px', paddingBottom: '4px' }"
          @keyup="rowDrop"
        >
          <el-table-column width="35" type="index"> </el-table-column>
          <el-table-column min-width="600" align="center">
            <template #default="scope">
              <div
                class="block"
                :class="`block_${scope.row.request.method.toLowerCase()}`"
              >
                <span
                  class="block-method block_method_color"
                  :class="`block_method_${scope.row.request.method.toLowerCase()}`"
                >
                  {{ scope.row.request.method }}
                </span>
                <div class="block">
                  <span
                    class="block-method block_method_color block_method_options"
                    v-if="scope.row.creator === 'yapi'"
                    :title="'从YAPI导入的接口'"
                  >
                    YAPI
                  </span>
                </div>
                <span class="block-method block_url">{{
                  scope.row.request.url
                }}</span>
                <span class="block-summary-description">{{
                  scope.row.name
                }}</span>
                <!--                  <div>-->
                <!--                    <span class="el-icon-s-flag"-->
                <!--                          v-if="scope.row.cases.length > 0 "-->
                <!--                          :title="'API已经被用例引用,共计: '+scope.row.cases.length + '次'">-->
                <!--                    </span>-->
                <!--                  </div>-->
              </div>
            </template>
          </el-table-column>

          <!--          <el-table-column align="right" label="按钮组">-->
          <!--            <template #default="scope">-->
          <!--              <el-button type="text" icon="edit" size="small" class="table-button" @click="updateInterfaceTemplateFunc(scope.row)">变更</el-button>-->
          <!--              <el-button type="text" icon="delete" size="mini" @click="deleteRow(scope.row)">删除</el-button>-->
          <!--            </template>-->
          <!--          </el-table-column>-->
        </el-table>
      </div>
      <!--        <div>-->
      <!--          <el-table-->
      <!--            ref="multipleTable"-->
      <!--            style="width: 100%"-->
      <!--            :show-header="false"-->
      <!--            :data="tableData"-->
      <!--            row-key="ID"-->
      <!--            :cell-style="{paddingTop: '4px', paddingBottom: '4px'}"-->
      <!--            @keyup="rowDrop"-->
      <!--        >-->
      <!--          <el-table-column width="35" type="index" >-->
      <!--          </el-table-column>-->
      <!--          <el-table-column-->
      <!--              min-width="600"-->
      <!--              align="center"-->
      <!--          >-->
      <!--            <template #default="scope">-->
      <!--              <div class="block" :class="`block_${scope.row.request.method.toLowerCase()}`">-->
      <!--                  <span class="block-method block_method_color"-->
      <!--                        :class="`block_method_${scope.row.request.method.toLowerCase()}`">-->
      <!--                    {{ scope.row.request.method }}-->
      <!--                  </span>-->
      <!--                <div class="block">-->
      <!--                    <span class="block-method block_method_color block_method_options"-->
      <!--                          v-if="scope.row.creator==='yapi'"-->
      <!--                          :title="'从YAPI导入的接口'">-->
      <!--                      YAPI-->
      <!--                    </span>-->
      <!--                </div>-->
      <!--                <span class="block-method block_url">{{ scope.row.request.url }}</span>-->
      <!--                <span class="block-summary-description">{{ scope.row.name }}</span>-->
      <!--                &lt;!&ndash;                  <div>&ndash;&gt;-->
      <!--                &lt;!&ndash;                    <span class="el-icon-s-flag"&ndash;&gt;-->
      <!--                &lt;!&ndash;                          v-if="scope.row.cases.length > 0 "&ndash;&gt;-->
      <!--                &lt;!&ndash;                          :title="'API已经被用例引用,共计: '+scope.row.cases.length + '次'">&ndash;&gt;-->
      <!--                &lt;!&ndash;                    </span>&ndash;&gt;-->
      <!--                &lt;!&ndash;                  </div>&ndash;&gt;-->
      <!--              </div>-->
      <!--            </template>-->
      <!--          </el-table-column>-->

      <!--          &lt;!&ndash;          <el-table-column align="right" label="按钮组">&ndash;&gt;-->
      <!--          &lt;!&ndash;            <template #default="scope">&ndash;&gt;-->
      <!--          &lt;!&ndash;              <el-button type="text" icon="edit" size="small" class="table-button" @click="updateInterfaceTemplateFunc(scope.row)">变更</el-button>&ndash;&gt;-->
      <!--          &lt;!&ndash;              <el-button type="text" icon="delete" size="mini" @click="deleteRow(scope.row)">删除</el-button>&ndash;&gt;-->
      <!--          &lt;!&ndash;            </template>&ndash;&gt;-->
      <!--          &lt;!&ndash;          </el-table-column>&ndash;&gt;-->
      <!--        </el-table>-->
      <!--        </div>-->
    </div>
  </div>
</template>

<script>
export default {
  name: "testCaseList",
};
</script>

<script setup>
import {
  createTestCase,
  deleteTestCase,
  deleteTestCaseByIds,
  updateTestCase,
  findTestCase,
  getTestCaseList,
  sortTestCase,
} from "@/api/testCase";
import { useRoute } from "vue-router";
import { ref, watch } from "vue";
import { onMounted } from "vue";

import interfaceTempleForm from "@/view/interface/interfaceTemplate/interfaceTemplateForm.vue";
import { findInterfaceTemplate } from "@/api/interfaceTemplate";
import { reactive } from "vue";
import { ElMessageBox } from "element-plus";
import Sortable from "sortablejs";

const props = defineProps({
  listType: ref(""),
  apiId: ref(0),
  caseId: ref(0),
  menuId: ref(0),
  data: ref({}),
});
let listType = "";
const route = useRoute();
let testCaseID = 1;
const tableData = ref([]);
const apiTypes = 2;
const interfaceTempleFormVisible = ref(false);
const dialogTitle = ref(false);
const type = ref("");
const heightDiv = ref();
const caseName = ref();
let sortIdList = "";
heightDiv.value = window.screen.height - 480;
const formDatas = reactive({
  name: "",
  request: reactive({
    agreement: "",
    method: "",
    url: "",
    params: "",
    headers: "",
    json: "",
    data: "",
  }),
  variables: "",
  extract: "",
  validate: "",
  hooks: "",
  apiMenuID: "",
});
const sortData = ref({
  ID: 0,
  TStep: [],
});

watch(
  () => props.data,
  (newValue, oldValue) => {
    tableData.value = newValue;
  }
);

const getTestCaseDetailFunc = async (testCaseID) => {
  const res = await findTestCase({ ID: testCaseID });
  if (res.code === 0) {
    tableData.value = res.data.reapicase.TStep;
    caseName.value = res.data.reapicase.name;
    // dialogFormVisible.value = true
  }
};

const init = () => {
  tableData.value = props.data;
  if (props.listType === "api") {
  } else if (props.listType === "case") {
    testCaseID = props.caseId;
    if (testCaseID) {
      getTestCaseDetailFunc(testCaseID);
    }
  }
};

const updateInterfaceTemplateFunc = async (row) => {
  const res = await findInterfaceTemplate({ ID: row.ID });
  type.value = "update";
  dialogTitle.value = "编辑用例步骤";
  if (res.code === 0) {
    formDatas.value = res.data.reapicase;
    interfaceTempleFormVisible.value = true;
  }
};

const deleteRow = (row) => {
  ElMessageBox.confirm("确定要删除吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    // deleteInterfaceTemplateFunc(row)
  });
};
onMounted(() => {
  rowDrop();
});

//行拖拽
const rowDrop = async () => {
  sortData.value.ID = Number(testCaseID);
  const tbody = document.getElementById("g1");

  Sortable.create(tbody, {
    async onEnd(evt) {},
  });
};

// 关闭弹窗
const closeDialog = () => {
  interfaceTempleFormVisible.value = false;
  formDatas.value = reactive({
    name: "",
    request: reactive({
      agreement: "",
      method: "",
      url: "",
      params: "",
      headers: "",
      json: "",
      data: "",
    }),
    variables: "",
    extract: "",
    validate: "",
    hooks: "",
    apiMenuID: "",
  });
};
</script>

<style lang="scss" scoped>
@import "src/style/apiList";
</style>
